<style lang="less">
    @import "./home.less";
</style>
<template>
    <div class="home-main">
        <Row :gutter="10">
        <Col :md="24" :lg="24">
            <Row :gutter="5">
                <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                <infor-card
                        id-name="user_created_count"
                        :end-val="totalData.user_total"
                        iconType="android-person"
                        color="#2d8cf0"
                        intro-text="会员总数"
                ></infor-card>
                </Col>
                <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                <infor-card
                        id-name="visit_count"
                        :end-val="totalData.coin_charge_total"
                        iconType="ios-eye"
                        color="#64d572"
                        :iconSize="50"
                        intro-text="构树链充值总额"
                ></infor-card>
                </Col>
                <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                <infor-card
                        id-name="collection_count"
                        :end-val="totalData.point_charge_total"
                        iconType="upload"
                        color="#ffd572"
                        intro-text="积分赠送总额"
                ></infor-card>
                </Col>
                <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                <infor-card
                        id-name="transfer_count"
                        :end-val="totalData.coin_trade_total"
                        iconType="shuffle"
                        color="#f25e43"
                        intro-text="构树链交易总额"
                ></infor-card>
                </Col>
            </Row>
            <Row :gutter="10" class="margin-top-10">
                <Col :md="24" :lg="8" :style="{marginBottom: '10px'}">
                <Card>
                    <p slot="title" class="card-title">
                        <Icon type="android-map"></Icon>
                        构树链充值Top10
                    </p>
                    <div class="data-source-row">
                        <Table
                                ref="selection"
                                height="200"
                                size="small"
                                :columns="columns"
                                :data="topData.coin_charge_total_top"
                                :loading="loading"
                        ></Table>
                    </div>
                </Card>
                </Col>
                <Col :md="24" :lg="8" :style="{marginBottom: '10px'}">
                <Card>
                    <p slot="title" class="card-title">
                        <Icon type="ios-pulse-strong"></Icon>
                        积分赠送Top10
                    </p>
                    <div class="data-source-row">
                        <Table
                                ref="selection"
                                height="200"
                                size="small"
                                :columns="columns"
                                :data="topData.point_charge_total_top"
                                :loading="loading"
                        ></Table>
                    </div>
                </Card>
                </Col>
                <Col :md="24" :lg="8">
                <Card>
                    <p slot="title" class="card-title">
                        <Icon type="android-wifi"></Icon>
                        交易笔数Top10
                    </p>
                    <div class="data-source-row">
                        <Table
                                ref="selection"
                                height="200"
                                size="small"
                                :columns="columns"
                                :data="topData.trade_order_total_top"
                                :loading="loading"
                        ></Table>
                    </div>
                </Card>
                </Col>
            </Row>
            <Row class="margin-top-10">
                <Card>
                    <p slot="title" class="card-title">
                        <Icon type="ios-shuffle-strong"></Icon>
                        充值趋势
                    </p>
                    <div class="line-chart-con">
                        <service-requests :chartData="chartData" ></service-requests>
                    </div>
                </Card>
            </Row>
        </Col>
    </Row>
    </div>
</template>
<script>
    import Util from '../../libs/util';
    import inforCard from './components/inforCard.vue';
    import serviceRequests from './components/serviceRequests.vue';
    import countUp from './components/countUp.vue';

    export default {
        name: 'home',
        components: {
            countUp,
            inforCard,
            serviceRequests
        },
        data () {
            return {
                loading: true,

                columns: [
                    {
                        title: '姓名',
                        key: 'nick_name'
                    },
                    {
                        title: '手机号',
                        key: 'moble'
                    },
                    {
                        title: '数额',
                        key: 'top_data'
                    }
                ],
                totalData: {
                    user_total: 0,
                    coin_charge_total: 0,
                    point_charge_total: 0,
                    coin_trade_total: 0,
                    sapling_trade_total: 0
                },
                topData: {
                    coin_charge_total_top: [],
                    point_charge_total_top: [],
                    trade_order_total_top: []
                },
                chartData: {
                    chart_date_list: [],
                    chart_coin_list: [],
                    chart_sapling_list: [],
                    chart_point_list: []
                },
                showAddNewTodo: false,
                newToDoItemValue: '',
                from: this.$route.params.from
            };
        },
        computed: {},
        mounted: function () {
            if(this.from == 'login') {
                window.location.reload();
                this.from = '';
            }
            this.$nextTick(function () {
                this.getData();
            });
        },
        methods: {
            getData (params) {
                Util.ajax.post(`/adminapi/index/index`, params).then(response => {
                    this.totalData = response.data.data.total_data;
                    this.topData = response.data.data.top_data;
                    this.loading = false;
                });
            }
        }
    };
</script>
